<template>
  <a-button
    :class="[
      // 'base-btn',
      `base-btn--${size}`,
      // `base-btn--${type}`,
      {
        'base-btn--block': block,
        // 'base-btn--loading': loading,
        // 'base-btn--disabled': disabled,
        // [`base-btn--${status}`]: status !== 'normal',
      },
      customClass,
    ]"
    :type="type"
    :size="size"
    :status="status"
    :loading="loading"
    :disabled="disabled"
    :shape="shape"
    v-bind="$attrs"
    @click="handleClick"
  >
    <template #icon v-if="$slots.icon">
      <slot name="icon" />
    </template>
    <slot />
  </a-button>
</template>

<script setup lang="ts">
import type { PropType } from 'vue'
import '@/assets/styles/components/base-button.css'

defineOptions({
  name: 'BaseButton',
  inheritAttrs: false,
})

// 修正按钮类型以匹配 ArcoDesign 的类型定义
type ButtonType = 'primary' | 'secondary' | 'outline' | 'text' | 'dashed'
type ButtonStatus = 'normal' | 'warning' | 'success' | 'danger'
type ButtonShape = 'circle' | 'round' | 'square'

const props = defineProps({
  // 按钮类型
  type: {
    type: String as PropType<ButtonType>,
    default: 'outline',
  },
  // 按钮状态
  status: {
    type: String as PropType<ButtonStatus>,
    default: 'normal',
  },
  // 按钮形状
  shape: {
    type: String as PropType<ButtonShape>,
    default: 'square',
  },
  // 按钮尺寸
  size: {
    type: String as PropType<'mini' | 'small' | 'medium' | 'large'>,
    default: 'medium',
  },
  // 按钮加载状态
  loading: {
    type: Boolean,
    default: false,
  },
  // 按钮禁用状态
  disabled: {
    type: Boolean,
    default: false,
  },
  // 按钮块级状态
  block: {
    type: Boolean,
    default: false,
  },
  // 自定义类名
  customClass: {
    type: [String, Array, Object],
    default: '',
  },
})

const emit = defineEmits<{
  (e: 'click', event: MouseEvent): void
}>()

const handleClick = (event: MouseEvent) => {
  if (!props.loading && !props.disabled) {
    emit('click', event)
  }
}
</script>
